<template>
  <div class="line-echarts">
    <baseECharts :options="options"></baseECharts>
  </div>
</template>

<script>
import baseECharts from "@/components/baseEChart.vue";
export default {
  components: {
    baseECharts,
  },
  props: {},
  computed: {
    options() {
      return {
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        legend: {
          // 距离底部为0%
          bottom: "0%",
          // 小图标的宽度和高度
          itemWidth: 10,
          itemHeight: 10,
          // 修改图例组件的文字为 12px
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "10",
          },
        },
        series: [
          {
            name: 'Area Mode',
            type: 'pie',
            radius: ['10%', '70%'],
            center: ['50%', '45%'],
            roseType: "radius",
            label: {
              fontSize: 10
            },
            labelLine:{
              length:6,
              length2:8
            },
            itemStyle: {
              borderRadius: 5
            },
            data: [
              { value: 20, name: '云南' },
              { value: 26, name: '北京' },
              { value: 24, name: '山东' },
              { value: 25, name: '河北' },
              { value: 20, name: '江苏' },
              { value: 25, name: '浙江' },
              { value: 30, name: '四川' },
              { value: 42, name: '湖北' }
            ]
          }
        ]
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.bar-echarts {
  width: 100%;
  height: 100%;
}
</style>
